﻿@model CoolAgenda.ViewModels.AgendaVM.AgendaDadosVM
@{
    ViewBag.Title = "Agenda";
}

<div id="paginaAgenda">
    <div style="float: left; width: 15%; background: #FFF; margin-left: 1%">
        <nav>
            <div class="menu-item alpha">
                <h4><a href="#" onclick="ShowEventPopup();">Novo Compromisso</a></h4>
            </div>
            <div class="menu-item alpha">
                <h4><a href="../Tarefa/Form" ;">Nova Tarefa</a></h4>
            </div>

            <div class="menu-item alpha">
                <h4>@Html.ActionLink("Contatos", "Index", "Contato")</h4>
            </div>

            <div class="menu-item">
                <h4 id="agendasMenu"><a class="idPertGrupo" data-val="">Minhas Agendas</a></h4>
                @{
                    
                    if (Model.TotalRegistros > 0)
                    {
                    <ul id="agendasSubMenu">
                        @for (int i = 0; i < Model.TotalRegistros; i++)
                        {
                            <li>
                                <div style="float: left; width: 80%"><a class="idPertGrupo" data-val="@Model.Lista[i].IdGrupo">@Model.Lista[i].Grupo.Nome</a></div>

                                @if (Model.Lista[i].Administrador == "A" || Model.Lista[i].Administrador == "B")
                                {
                                    <a href="@Url.Action("Index", "GrupoUsuario", new { id = Model.Lista[i].IdGrupo })">
                                        <img src="~/Images/entrenagem.png" title="Gerenciar" /></a>
                                }
                                else
                                {
                                    <span>&nbsp;</span>
                                }
                            </li>             
                        }
                    </ul>
                    }
                    else
                    {
                    <p>Nenhum registro encontrado.</p>
                    }    
                }
            </div>

            <div class="menu-item">
                <h4 id="tarefasMenu">@Html.ActionLink("Tarefas", "Index", "Tarefa")</h4>
                @{
                    
                    if (Model.TotalRegistrosTarefa > 0)
                    {
                    <ul id="tarefasSubMenu">
                        @for (int i = 0; i < Model.TotalRegistrosTarefa; i++)
                        {
                            <li>
                                <div style="float: left; width: 100%;"><a class="idPertGrupo" data-val="@Model.ListaTarefa[i].IdTarefa">@Model.ListaTarefa[i].NomeTarefa</a></div>
                            </li>             
                        }
                    </ul>
                    }
                    else
                    {                    
                    <ul id="tarefasSubMenu">
                        <li>Nenhum registro encontrado.</li>

                    </ul>
                    }
                }
            </div>

        </nav>
    </div>

    <div id='calendar' style="float: right; width: 83%; background: #FFF; margin-right: 1%;"></div>

    <div id="popupEventForm" class="modal hide" style="display: none;">

        @Html.Action("Cadastrar", "Compromisso")
    </div>

    @*    <div id="popupEventTarefaForm" class="modal hide" style="display: none;">
        @Html.Action("Form", "Tarefa")
    </div>*@


</div>
@section scripts{

    <script>
        function CarregaCalendario() {
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                defaultView: 'month',
                eventLimit: true,
                editable: false,
                allDaySlot: true,
                selectable: true,
                slotMinutes: 30,
                aspectRatio: 1.8,
                timeFormat: 'H:mm',
                timezone: "local",
                eventClick: function (event, jsEvent, view) {
                    $(".qtip").remove();
                    var inicio = moment(event.start).format('dd, DD MMM, HH:mm');
                    var final = moment(event.end).format('dd, DD MMM, HH:mm');
                    var ms = moment(event.end, "DD/MM/YYYY HH:mm:ss").diff(moment(event.start, "DD/MM/YYYY HH:mm:ss"));
                    var d = moment.duration(ms);
                    var s = Math.floor(d.asHours()) + moment.utc(ms).format(":mm:ss");
                    var url = '@Url.Action("Editar", "Compromisso")';

                    var aceito;
                    var criador;

                    if (event.aceito == "S")
                        aceito = "Aceito"
                    if (event.aceito == "N")
                        aceito = "Não Aceito"
                    if (event.aceito == "P")
                        aceito = "Pendente"

                    if (event.criador == "S")
                        criador = "<div style='text-align:right'><div style='float:left'><span style='margin-right:3px'><a href='#' onclick='RequisitaExcluir(" + event.id + ")'>Excluir</a></span></div><a href= " + url + "/" + event.id + ">Editar/Visualizar</a></div>";
                    else
                        criador = "<span class='title' style='font-weight:bold'>Status: </span>" + aceito + "<br /><div><div style='float:left'><span style='margin-right:3px'><a href='#' onclick='RequisitaAceitar(" + event.id + ")'>Sim</a></span>|<span style='margin-left:3px'><a href='#' onclick='RequisitaRejeitar(" + event.id + ")'>Não</a></span></div><div style='text-align:right'><a href= " + url + "/" + event.id + ">Editar/Vizualizar</a></div></div>";

                    if (event.allDay == true) {
                        $(this).qtip({
                            content: {
                                title: { text: event.title },
                                text: "<div class='bolha'>" + moment(event.start).format('dd, DD MMM') + " - " + moment(event.end).format('dd, DD MMM') + "<br><span class='title' style='font-weight:bold'>Duração: </span>Dia Inteiro<br /><span class='title' style='font-weight:bold'>Grupo: </span>" + event.grupo + "<br />" + criador + "</div>"
                            },
                            position: {
                                adjust: {
                                    x: -240,
                                    y: -160,
                                    resize: false // We'll handle it manually
                                },
                            },
                            show: {
                                when: { event: 'click' },
                                solo: true,
                                ready: true, // Show the tooltip when ready
                            },
                            hide: {
                                event: 'click',
                                fixed: true,
                                delay: 300,
                                effect: function (offset) {
                                    $(this).fadeOut(160);
                                }
                            },
                            style: {
                                width: 250,
                                padding: 5,
                                color: 'black',
                                textAlign: 'left',
                                border: {
                                    width: 1,
                                    radius: 3
                                },
                                tip: 'bottom-middle',
                                classes: 'daytooltip ui-tooltip-dark ui-tooltip-shadow',
                                tip: {
                                    width: 20, height: 8
                                },
                                title: { background: event.color, color: 'white', padding: 5 }
                            }
                        })
                    }
                    else {
                        $(this).qtip({
                            content: {
                                title: { text: event.title },
                                text: "<div class='bolha'>" + inicio + " - " + final + "<br><span class='title' style='font-weight:bold'>Duração: </span>" + s + "<br /><span class='title' style='font-weight:bold'>Grupo: </span>" + event.grupo + "<br />" + criador + "</div>"
                            },
                            position: {
                                adjust: {
                                    x: -240,
                                    y: -160,
                                    resize: false // We'll handle it manually
                                },
                            },
                            show: {
                                solo: true,
                                ready: true, // Show the tooltip when ready
                            },
                            hide: {
                                event: 'click',
                                fixed: true,
                                delay: 300,
                                effect: function (offset) {
                                    $(this).fadeOut(160);
                                }
                            },
                            style: {
                                width: 250,
                                padding: 5,
                                color: 'black',
                                textAlign: 'left',
                                border: {
                                    width: 1,
                                    radius: 3
                                },
                                tip: 'bottom-middle',
                                classes: 'daytooltip ui-tooltip-dark ui-tooltip-shadow',
                                tip: {
                                    width: 20, height: 8
                                },
                                title: { background: event.color, color: 'white', padding: 5 }
                            }
                        })
                    }
                },
                dayClick: function (date, view) {
                    $('#txDataInicial').val(date.format('DD/MM/YYYY hh:mm'));
                    $('#txDataFinal').val(date.format('DD/MM/YYYY hh:mm'));;
                    ShowEventPopup(date);
                },
                dayRender: function () {
                    highlight();
                },
                events: "/Agenda/GetEvents/"
            });

            highlight();
        }

        function ShowEventPopup(date) {
            $('#popupEventForm').show();
            $('#nomeCompromisso').focus();
        }

        function ShowTarefaEventPopup(date) {
            $('#popupEventTarefaForm').show();
        }

        //$(function () {
        //    $('#tarefasMenu').click(function () {
        //        $('#tarefasSubMenu').slideToggle();
        //    });
        //});

        function highlight() {
            $('td.fc-day').mouseover(function () {
                var strDate = $(this).data('date');
                $(this).addClass('fc-highlight');
            });
            $('td.fc-day-number').mouseover(function () {
                var strDate = $(this).data('date');
                $("td.fc-day").filter("[data-date='" + strDate + "']").addClass('fc-highlight');
            });
            $('td.fc-day').mouseout(function () {
                $(this).removeClass('fc-highlight');
            })
            $('td.fc-day-number').mouseout(function () {
                var strDate = $(this).data('date');
                $("td.fc-day").filter("[data-date='" + strDate + "']").removeClass('fc-highlight');
            })
        };

        $(document).ready(function () {
            CarregaCalendario();
            $('.idPertGrupo').click(function () {
                var idSelecionado = $(this).data('val');
                var events = {
                    url: '/Agenda/GetEvents/',
                    type: 'POST',
                    data: {
                        id: idSelecionado
                    }
                }
                $('#calendar').fullCalendar('removeEventSource', events);
                $('#calendar').fullCalendar('addEventSource', events);
            });
        });

        //Armazena o id do compromisso
        var idCompromisso;

        // Efetua uma requisição ao servidor pedindo para aceitar um compromisso
        function RequisitaAceitar(idCompromisso) {
            $.post('@Url.Action("Aceitar", "Compromisso")', { id: idCompromisso }, function (data) {
                // Mostra uma notificação de acordo com a resposta do servidor
                if (!data.Erro)
                    JSMostraNotificacaoSucesso(data.Mensagem, false, function () { location.reload(); });
                else
                    JSMostraNotificacaoErro(data.Mensagem, true);
            });
        }

        // Efetua uma requisição ao servidor pedindo para aceitar um compromisso
        function RequisitaRejeitar(idCompromisso) {
            $.post('@Url.Action("Rejeitar", "Compromisso")', { id: idCompromisso }, function (data) {
                // Mostra uma notificação de acordo com a resposta do servidor
                if (!data.Erro)
                    JSMostraNotificacaoSucesso(data.Mensagem, false, function () { location.reload(); });
                else
                    JSMostraNotificacaoErro(data.Mensagem, true);
            });
        }

        // Efetua uma requisição ao servidor pedindo para aceitar um compromisso
        function RequisitaExcluir(idCompromisso) {
            $.post('@Url.Action("Excluir", "Compromisso")', { id: idCompromisso }, function (data) {
                // Mostra uma notificação de acordo com a resposta do servidor
                if (!data.Erro)
                    JSMostraNotificacaoSucesso(data.Mensagem, false, function () { location.reload(); });
                else
                    JSMostraNotificacaoErro(data.Mensagem, true);
            });
        }
    </script>
}
